<template> 
<!-- 修改密码 -->
 <el-dialog
    :model-value="passVisible"
    :title="title"
    width="500"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
  <el-form :model="form" label-width="auto" ref="passFormRef" :rules="rules">
        <el-form-item label="登录账号">
            <el-input v-model.trim="form.userCode" disabled placeholder="请输入" />
        </el-form-item>
    
        <el-form-item label="登录姓名">
            <el-input v-model.trim="form.userName" disabled placeholder="请输入" />
        </el-form-item>
    
        <el-form-item label="原始密码" prop="oldPassword">
            <el-input v-model.trim="form.oldPassword"
             type="password"
            autocomplete="off" placeholder="请输入原始密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input v-model.trim="form.newPassword"
             type="password"
            autocomplete="off" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model.trim="form.confirmPassword"
             type="password"
            autocomplete="off" placeholder="请确认新密码" />
        </el-form-item>
    
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { watch, ref , reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { apiChangePass } from '@/api/login'

let props = defineProps({
  passVisible: {
    type: Boolean,
    default: false
  }
})
let emit = defineEmits(['close', 'confirm'])

let form = ref({
  userCode: '',
  userName: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
let title = ref('修改密码')
let passFormRef = ref() // 获取表单ref

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (form.value.confirmPass !== '') {
      if (!passFormRef.value) return
      passFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== form.value.newPassword) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}
let rules = reactive({
  oldPassword: [
    {
      required: true, message: '请输入原密码', trigger: 'blur'
    }
  ],
  newPassword: [
    {
      required: true,validator: validatePass, trigger: 'blur',
    },
    { min: 6, max: 12, message: '密码长度在6-12位之间', trigger: 'blur' },
  ],
  confirmPassword: [
    {
      required: true, validator: validatePass2, trigger: 'blur'
    },
    { min: 6, max: 12, message: '密码长度在6-12位之间', trigger: 'blur' },
  ],
})

watch(() => props.passVisible, (newV) => {
  if(newV) {
    form.value = {
      userCode: '',
      userName: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
        
  }
})

// 取消
const handleClose = () => {

  emit('close')
}
// 确定
const handleConfirm = async () => {
  console.log('passFormRef',passFormRef.value)
    
  if(!passFormRef.value) {
    return
  }
  await passFormRef.value.validate(async (valid) => {
    if(valid) {
      const res = await apiChangePass({
        ...form.value
      })
      if(res) {
        ElMessage.success('操作成功')
                
        emit('close')
      }
    }
  })
   
}
</script>

<style lang="scss" scoped>

</style>